<template>
  <div id="mapwrap"></div>
  <div class="maptanchuang" :style="[tanchuangStyle]">
	<div class="title">
		 {{nowdata.name}}
		<div class="close-btn" @click="qiehuantanchuang(false)">
			 <el-icon size="26"><CircleClose /></el-icon>
		</div>
	</div>
	<div class="content-tanchuang">
		
		
			<div style="height:600px;overflow: auto;">
				<div>
					<img :src="nowdata.leftUrl" v-if="nowdata.leftUrl" alt="">
				</div>
				<div>
					<img :src="nowdata.rightUrl" v-if="nowdata.rightUrl">
				</div>
				<div>
					<img :src="nowdata.src" v-if="nowdata.src">
				</div>
			</div>
		<!-- <div class="list-wrap" >
			<div class="left">
				站名:
			</div>
			<div class="right">
				{{nowdata.name}}
			</div>
		</div> -->
		
		<!-- <div class="list-wrap" >
			<div class="left">
				编码:
			</div>
			<div class="right">
				{{nowdata.code}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				主管单位:
			</div>
			<div class="right">
				{{nowdata.zhuanguandanwei}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				属地责任单位:
			</div>
			<div class="right">
				{{nowdata.shudizerendanwei}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				技术依托单位:
			</div>
			<div class="right">
				{{nowdata.jishuyituodanwei}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				建	设	时	间:
			</div>
			<div class="right">
				{{nowdata.jianshetime}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				所处行政区:
			</div>
			<div class="right">
				{{nowdata.suochuxingzheng}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				所属水系:
			</div>
			<div class="right">
				{{nowdata.suochushuixi}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				所属小流域:
			</div>
			<div class="right">
				{{nowdata.suoshuxiaoliuyu}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				经纬度:
			</div>
			<div class="right">
				{{nowdata.jingweidu}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				所属防治区:
			</div>
			<div class="right">
				{{nowdata.suoshufangzhiqu}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				地形地质:
			</div>
			<div class="right">
				{{nowdata.dixingdizhi}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				植被土壤:
			</div>
			<div class="right">
				{{nowdata.zhibeiturang}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				气象特征:
			</div>
			<div class="right">
				{{nowdata.qixiangtezheng}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				侵蚀类型:
			</div>
			<div class="right">
				{{nowdata.qinshileixing}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				土地利用类型:
			</div>
			<div class="right">
				{{nowdata.tudiliyongleixing}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				主要监测设施:
			</div>
			<div class="right">
				{{nowdata.zhuyaojiancesheshi}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				主要监测内容:
			</div>
			<div class="right">
				{{nowdata.zhuyaojianceneirong}}
			</div>
		</div>
		<div class="list-wrap" >
			<div class="left">
				控制面积:
			</div>
			<div class="right">
				{{nowdata.kongzhiianji}}
			</div>
		</div> -->
	</div>
  </div>
</template>

<script>
import Map from "@arcgis/core/Map";

import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import TileInfo from "@arcgis/core/layers/support/TileInfo";
import Graphic from "@arcgis/core/Graphic";
import * as Locator from '@arcgis/core/rest/locator'

import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
import * as webMercatorUtils from "@arcgis/core/geometry/support/webMercatorUtils";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import MapView from "@arcgis/core/views/MapView";
import BaseLayerViewGL2D from "@arcgis/core/views/2d/layers/BaseLayerViewGL2D";
import Basemap from "@arcgis/core/Basemap.js";
import BasemapToggle from "@arcgis/core/widgets/BasemapToggle.js";
import { viewPageStationInfo } from "../../../api/index";
const locatorUrl = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";



let yingxiang = new WebTileLayer(
  "http://{subDomain}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=575c0cf71ecd654413b3540a1f7182c5",
  {
    subDomains: subDomains,
    tileInfo: gettileInfo2D(TileInfo),
    spatialReference: 4326,
    id: "yingxiang",
  }
);

let yingxiangbiaozhu = new WebTileLayer(
  "http://{subDomain}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=575c0cf71ecd654413b3540a1f7182c5",
  {
    subDomains: subDomains,
    tileInfo: gettileInfo2D(TileInfo),
    spatialReference: 4326,
    opacity: 1,
    id: "yingxiangbiaozhu",
  }
);










let map = new Map({
  spatialReference: {
    wkid: 4326,
  },
   basemap: {
              baseLayers:[yingxiang,yingxiangbiaozhu]
            }
});
let mianLayer = new GraphicsLayer();
let pointLayer = new GraphicsLayer();

mianLayer.visible = true;
pointLayer.visible = true;


//map.addMany([yingxiang, yingxiangbiaozhu]);
map.add(mianLayer, 55);
//map.add(layer, 100);
map.add(pointLayer, 99);
let pointArr = [];
export default {
  data() {
    return {
		nowStation:'',
		leftUrl:'',
		rightUrl:'',
		nowdata:{},
		zhandianData:[
			{
				name:'安义县长垅坡面径流场',
				code:'FH3621013140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'安义县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2010年9月',
				suochuxingzheng:'安义县长埠镇',
				suochushuixi:'修河',
				suoshuxiaoliuyu:'长垅小流域',
				jingweidu:'东经115°35′31″，北纬28°46′19″',
				suoshufangzhiqu:'',
				dixingdizhi:'低丘，地质为江西北部华夏系构造，成土母质为第四纪红土',
				zhibeiturang:'植被有马尾松、湿地松、胡枝子、冬青白茅、狗尾草等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温17.1℃，年均降雨量1515.7mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地',
				zhuyaojiancesheshi:'10°径流小区4个、7°径流小区2个、5°径流小区2个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/anyixianchanglongpo.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/anyixianchanglongporight.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/anyi.jpg', import.meta.url).href
			},
			{
				name:'奉新县中堡港坡面径流场',
				code:'FH3620814140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'奉新县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年8月',
				suochuxingzheng:'奉新县赤岸镇',
				suochushuixi:'修河',
				suoshuxiaoliuyu:'中堡港小流域',
				jingweidu:'东经115°20′ 33″，北纬28°39′ 35″',
				suoshufangzhiqu:'省级水土流失重点预防区',
				dixingdizhi:'低丘，覆盖层为第四系河流冲积层，成土母质为花岗岩',
				zhibeiturang:'植被有马尾松、湿地松、泡桐为、红胡壤枝子、白茅、狗尾草等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温17.3℃，年均降雨量1612mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地',
				zhuyaojiancesheshi:'6°径流小区4个、9°径流小区4个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/fengxinxianzhongbaogang.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/fengxinxianzhongbaogangpomian.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/fengxin.jpg', import.meta.url).href
				
			},
			{
				name:'奉新县中堡港小流域控制站',
				code:'FH3620814140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'奉新县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2017年12月',
				suochuxingzheng:'奉新县赤岸镇',
				suochushuixi:'修河',
				suoshuxiaoliuyu:'中堡港小流域',
				jingweidu:'东经115°20′33″，北纬28°39′35″',
				suoshufangzhiqu:'省级水土流失重点预防区',
				dixingdizhi:'低丘，覆盖层为第四系河流冲积层，成土母质为花岗岩',
				zhibeiturang:'植被有马尾松、湿地松、泡桐为、红胡壤枝子、白茅、狗尾草等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温17.3℃，年均降雨量1612mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地',
				zhuyaojiancesheshi:'直角三角薄壁堰等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/fengxinxianzhongbaogangxiaoliuyu.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/fengxinxianzhongbaogangxiaoliuyu.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/fengxinxiaoliuyu.jpg', import.meta.url).href
				
				
			},
			{
				name:'广昌县罗田坡面径流场',
				code:'FH3620514140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'广昌县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年10月',
				suochuxingzheng:'广昌县旴江镇',
				suochushuixi:'抚河',
				suoshuxiaoliuyu:'罗田小流域',
				jingweidu:'东经116°17′06″，北纬26°45′47″',
				suoshufangzhiqu:'国家级水土流失重点治理区',
				dixingdizhi:'低丘，成土母质为红砂岩',
				zhibeiturang:'植被有马尾松、湿地松、杜鹃、乌饭等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温19.1℃，年均降雨量1727mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地',
				zhuyaojiancesheshi:'18°径流小区5个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/guangchangxianluotianpomian.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/guangchangxianluotianpomian.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/guangchang.JPG', import.meta.url).href,
				
			},
			{
				name:'吉州区官溪坡面径流场',
				code:'FH3621114140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'吉州区水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年9月',
				suochuxingzheng:'吉州区长塘镇',
				suochushuixi:'赣江',
				suoshuxiaoliuyu:'官溪小流域',
				jingweidu:'东经114°51′53″ ，北纬26°54′ 55″',
				suoshufangzhiqu:'',
				dixingdizhi:'低丘、成土母质为第四纪红土',
				zhibeiturang:'植被有马尾松、湿地松、狗尾草等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温18.3℃，年均降雨量1467mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地',
				zhuyaojiancesheshi:'6°径流小区6个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/jizhouquguanxipomian.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/jizhouquguanxipomian.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/jizhou.png', import.meta.url).href,
				
			},
			{
				name:'上犹县水村坡面径流场',
				code:'FH3620414140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'上犹县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年9月',
				suochuxingzheng:'上犹县油石乡',
				suochushuixi:'赣江',
				suoshuxiaoliuyu:'水村小流域',
				jingweidu:'东经114°31′14″，北纬26°52′38″',
				suoshufangzhiqu:'国家级水土流失重点治理区',
				dixingdizhi:'低丘，地质为华夏系构造，成土母质为紫色砂页岩',
				zhibeiturang:'植被有马尾松、山苍子、胡枝子、葛藤、白茅、狗尾草等，土壤为紫色土',
				qixiangtezheng:'亚热带季风气候，年均气温18.6℃，年均降雨量1512mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地',
				zhuyaojiancesheshi:'9°径流小区5个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				
				src:new URL('../../../assets/img/zhandiansrc/shangyou.jpg', import.meta.url).href,
				leftUrl:new URL('../../../assets/img/leftinfo/shangyouxianshuicunpomian.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/shangyouxianshuicunpomian.png', import.meta.url).href
			},
			{
				name:'兴国县黄金坪坡面径流场',
				code:'FH3621314140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'兴国县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年12月',
				suochuxingzheng:'兴国县永丰镇',
				suochushuixi:'赣江',
				suoshuxiaoliuyu:'蕉溪小流域',
				jingweidu:'东经115°16′45″，北纬26°16′15″',
				suoshufangzhiqu:'国家级水土流失重点治理区',
				dixingdizhi:'低丘，成土母质为花岗岩',
				zhibeiturang:'植被有马尾松、杜鹃、芒萁等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温18.8℃，年均降雨量1529mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地',
				zhuyaojiancesheshi:'15°径流小区5个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/xingguoxianhuangjinpingpomian.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/xingguoxianhuangjinpingpomian.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/xingguopomian.jpg', import.meta.url).href
				
			},
			{
				name:'婺源县中云坡面径流场',
				code:'FH3620714140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'婺源县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年9月',
				suochuxingzheng:'婺源县中云镇',
				suochushuixi:'饶河',
				suoshuxiaoliuyu:'中云小流域',
				jingweidu:'东经117°41′23″，北纬29°12′40″',
				suoshufangzhiqu:'省级水土流失重点预防区',
				dixingdizhi:'低丘，成土母质为泥质岩',
				zhibeiturang:'植被有马尾松、湿地松、杜鹃、乌饭等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温18.4℃，年均降雨量1827mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地',
				zhuyaojiancesheshi:'9°径流小区6个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/wuyuanxianzhongyunpomian.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/wuyuanxianzhongyunpomian.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/wuyuan.jpg', import.meta.url).href
				
			},
			{
				name:'兴国县蕉溪小流域控制站',
				code:'FH3621314140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'兴国县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年10月',
				suochuxingzheng:'兴国县永丰镇',
				suochushuixi:'赣江',
				suoshuxiaoliuyu:'蕉溪小流域',
				jingweidu:'东经115°16′45″，北纬26°16′15″',
				suoshufangzhiqu:'国家级水土流失重点治理区',
				dixingdizhi:'低丘，成土母质为花岗岩',
				zhibeiturang:'植被有马尾松、杜鹃、芒萁等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温18.8℃，年均降雨量1529mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地、建设用地',
				zhuyaojiancesheshi:'巴歇尔槽等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量等',
				kongzhiianji:'3.02km²',
				leftUrl:new URL('../../../assets/img/leftinfo/xingguoxianjiaoxixiaoliuyu.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/xingguoxianjiaoxixiaoliuyu.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/xingguoliuyu.jpg', import.meta.url).href
				
			},
			{
				name:'泰和县老虎山坡面径流场',
				code:'FH3620133140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'泰和县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年5月',
				suochuxingzheng:'泰和县澄江镇',
				suochushuixi:'赣江',
				suoshuxiaoliuyu:'老虎山流域',
				jingweidu:'东经114°53′03″，北纬26°50′26″',
				suoshufangzhiqu:'国家级水土流失重点治理区',
				dixingdizhi:'低丘，成土母质为第四纪红土',
				zhibeiturang:'植被有马尾松、木荷、枫香、杜鹃、胡枝子、乌饭等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温18.6℃，年均降雨量1363mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地',
				zhuyaojiancesheshi:'8°径流小区6个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/taihexianlaohushanpomian.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/taihexianlaohushanpomianjingliuchang.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/taihelaohushanpomian.jpg', import.meta.url).href,
				
			},
			{
				name:'修水县清水桥小流域坡面径流场',
				code:'FH3620914140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'修水县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年9月',
				suochuxingzheng:'修水县白岭镇',
				suochushuixi:'修河',
				suoshuxiaoliuyu:'清水桥小流域',
				jingweidu:'东经114°01′57″，北纬29°04′42″',
				suoshufangzhiqu:'省级水土流失重点治理区',
				dixingdizhi:'低丘，成土母质为花岗岩',
				zhibeiturang:'植被有马尾松、胡枝子、芒萁等，土壤为黄红壤',
				qixiangtezheng:'亚热带季风气候，年均气温16.5℃，年均降雨量1710mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地',
				zhuyaojiancesheshi:'20°径流小区6个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/xiushuixianqingshuiqiao.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/xiushuixianqingshuiqiaopomian.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/xiushui.jpg', import.meta.url).href,
				
			},
			{
				name:'泰和县老虎山小流域综合观测站',
				code:'FH3620133140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'泰和县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年5月',
				suochuxingzheng:'泰和县澄江镇',
				suochushuixi:'赣江',
				suoshuxiaoliuyu:'老虎山',
				jingweidu:'东经114°54′12″，北纬26°51′10″',
				suoshufangzhiqu:'国家级水土流失重点治理区',
				dixingdizhi:'低丘，成土母质为第四纪红土',
				zhibeiturang:'植被有马尾松、木荷、枫香、杜鹃、胡枝子、乌饭等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温18.6℃，年均降雨量1363mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地、建设用地',
				zhuyaojiancesheshi:'巴歇尔槽等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量等',
				kongzhimianji:'3.07km²',
				leftUrl:new URL('../../../assets/img/leftinfo/taihexianlaohushanxiaoliuyu.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/taihexianlaohushanxiaoliuyu.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/taiheliuyu.png', import.meta.url).href,
				
			},
			{
				name:'弋阳县上张坡面径流场',
				code:'FH3620614140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'弋阳县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年5月',
				suochuxingzheng:'弋阳县圭峰镇',
				suochushuixi:'信江',
				suoshuxiaoliuyu:'丰峰小流域',
				jingweidu:'东经117°25′36″，北纬28°32′55″',
				suoshufangzhiqu:'省级水土流失重点治理区',
				dixingdizhi:'低丘，成土母质为红砂岩',
				zhibeiturang:'植被有马尾松、湿地松、杜鹃、杨梅等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温18℃，年均降雨量1649mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、草地',
				zhuyaojiancesheshi:'5°径流小区5个等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量、作物产量等',
				leftUrl:new URL('../../../assets/img/leftinfo/yiyangxianshangzhangpomian.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/yiyangxianshangzhangpomian.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/yiyang.jpg', import.meta.url).href,
				
			},
			{
				name:'玉山县金桥小流域控制站',
				code:'FH3620324140',
				zhuanguandanwei:'江西省水利厅',
				shudizerendanwei:'玉山县水利局',
				jishuyituodanwei:'江西省水土保持监测中心',
				jianshetime:'2009年11月',
				suochuxingzheng:'玉山县文成镇',
				suochushuixi:'信江',
				suoshuxiaoliuyu:'金桥小流域',
				jingweidu:'东经118°08′48″，北纬28°37′53″',
				suoshufangzhiqu:'省级水土流失重点治理区',
				dixingdizhi:'低丘，处于扬子准地台南东缘，成土母质为红砂岩',
				zhibeiturang:'植被有马尾松、湿地松、杜鹃、杨梅等，土壤为红壤',
				qixiangtezheng:'亚热带季风气候，年均气温17.9℃，年均降雨量1841mm',
				qinshileixing:'水力侵蚀',
				tudiliyongleixing:'耕地、园地、林地、建设用地',
				zhuyaojiancesheshi:'巴歇尔槽等',
				zhuyaojianceneirong:'降雨、径流泥沙、植被、土壤含水量等',
				kongzhimianji:'2.02km²',
				leftUrl:new URL('../../../assets/img/leftinfo/yushanxianjinqiaoxiaoliuyu.png', import.meta.url).href,
				rightUrl:new URL('../../../assets/img/rightinfo/yushanxianjinqiaoxiaoliuyu.png', import.meta.url).href,
				src:new URL('../../../assets/img/zhandiansrc/yushan.jpg', import.meta.url).href,
				
			}
		],
	  tanchuangStyle:{
		opacity:0,
		left:0,
		top:0
	  },
      tableData: [],
	  leftUrl:new URL('./jiancezhan.png', import.meta.url).href,
	  datapoint:[],
	  stationInfo:JSON.parse(JSON.stringify(stationInfo))
    };
  },
  methods: {
	  qiehuantanchuang(on){
		  if(!on){
			 this.tanchuangStyle={
			 	display:'none'
			 } 
		  }
	  },
    getData() {
      let that = this;
      let data = {
        currentPage: 1,
        pageSize: 100,
      };
      viewPageStationInfo(data).then((res) => {
        let datapoint=res.object.dataList.map(item=>{
            item.longitude=ToDigital(item.longitude.split('°')[0],item.longitude.split('°')[1].split('′')[0],item.longitude.split('′')[1].split('\"')[0]),
            item.latitude=ToDigital(item.latitude.split('°')[0],item.latitude.split('°')[1].split('′')[0],item.latitude.split('′')[1].split('\"')[0])
            return item
        })
		that.datapoint=datapoint

       

       
       that.resetpoint()

        that.tableData = res.object.dataList;
      });
    },
	resetpoint(){
		pointArr=[]
		let that=this
		
		
		for (let i = 0; i < this.datapoint.length; i++) {
		  let point = {
		    type: "point", 
		    longitude: this.datapoint[i].longitude,
		    latitude: this.datapoint[i].latitude,
		  };
		  let attributes=this.datapoint[i]
		  for(let j=0;j<that.zhandianData.length;j++){
			  if(this.datapoint[i].stcd==that.zhandianData[j].code){
				  
			
				  
				  
				attributes=that.zhandianData[j] 
			  }
		  }
		  
		  
		  let pxpoint='33px'
		  if(this.datapoint[i].stcd===this.stationInfo.stcd){
			pxpoint='55px'
		  }
		  let markerSymbol = {
		   
		    type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
		    url: this.leftUrl,
		    width:pxpoint,
		    height: pxpoint
		  };
		  let pointGraphic = new Graphic({
		    geometry: point,
		    symbol: markerSymbol,
			attributes
		  });
		  pointArr.push(pointGraphic);
		}
		
		
		     
		pointLayer.addMany(pointArr);
	},
    mian(rings) {
		
      let polygon = {
        type: "polygon",
        rings: rings[0],
      };
      let lineColor = [0, 0, 255, 0.4];
      let areaColor = [42, 228, 184, 0];

      let simpleFillSymbol = {
        type: "simple-fill",
        color: areaColor,
        outline: {
          color: lineColor,
          width: 2,
        },
      };

      let polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: simpleFillSymbol,
      });

      mianLayer.add(polygonGraphic);
    },
	mian2(rings) {
		//console.log(rings)
	  let polygon = {
	    type: "polygon",
	    rings: rings[0],
	  };
	  let lineColor = [0, 0, 255, 0];
	  let areaColor = [42, 228, 184, 0.3];
	
	  let simpleFillSymbol = {
	    type: "simple-fill",
	    color: areaColor,
	    outline: {
	      color: lineColor,
	      width: 2,
	    },
	  };
	
	  let polygonGraphic = new Graphic({
	    geometry: polygon,
	    symbol: simpleFillSymbol,
	  });
	
	  mianLayer.add(polygonGraphic);
	},
  },
  mounted() {

	
	
    let that = this;

    let view = new MapView({
      container: "mapwrap",
      map: map,
      spatialReference: {
        wkid: 4326
      },
      center: [115.10537294542043, 25.907506574471004],
      zoom: 5,
    });
	
	
	var basemapToggle = new BasemapToggle({
	      view: view,
	      nextBasemap: yingxiangbiaozhu,
	    });
	    view.ui.add(basemapToggle,{ position: "top-right" });
	
	view.on('click', (e) => {
		
		const params = {
		  
		    Street: "北京东路",
		    City: "南昌",
		   
		};
		
		
		Locator
		  .addressToLocations(locatorUrl, params)
		  .then((response) => {
		    console.log(response)
		  })
		  .catch(() => {
		   console.log('No address was found for this location')
		  });
		
		
	  //hitTest方法在点击位置上如果存在 Graphic(线或点)，即可获取 Graphic 对象的整个数据
	  view.hitTest(e).then((res) => {
		 console.log(res)
	    if (res.results.length) {
			
			
			
			
			
			let activePoint=res.results[0].graphic		
				  
			if(activePoint){
				console.log(res.results,'????????????????????????')
				if(!res.results[0].graphic.attributes){
					return
				}
				pointLayer.removeMany(pointArr)
				let point=view.toScreen(activePoint.geometry)
				that.stationInfo=res.results[0].graphic.attributes
				
				that.stationInfo.stcd=that.stationInfo.code
				that.resetpoint()
				that.nowdata=res.results[0].graphic.attributes
				
				
				
				
				if(that.nowdata.rightUrl){
					that.tanchuangStyle={
						display:'block',
						right:'35px',
						top:'116px'
					}
				}else{
					that.$message.success('未收录测站信息');
					that.tanchuangStyle={
						display:'none',
						right:'35px',
						top:'116px'
					}
				}
				// that.tanchuangStyle.left=point.x+50+'px'
				// that.tanchuangStyle.top=point.y+70+'px'
								
			}
			
	       
			
	    }
	  });
	});
	
	
	//Locator
	
    // view.on("double-click", (event) => {
    //   event.stopPropagation();
    //   event.mapPoint.spatialReference = {
    //     wkid: 4326,
    //   };
    //   layer.graphics.add({
    //     geometry: event.mapPoint,
    //     attributes: {
    //       NAME: "Feature #" + new Date().getTime(),
    //       POPULATION: 100000,
    //     },
    //   });
    // });
    
    view.when(function () {
      that.getData();
	  //that.mian(jingdezhen.features);
	  // that.mian(jiangximapdata.features[0].geometry.coordinates);
	  // that.mian(ganzhou.features[0].geometry.coordinates);
	  // that.mian(shangrao.features[0].geometry.coordinates);
	  // that.mian(fuzhou.features[0].geometry.coordinates);
	  // that.mian(yichun.features[0].geometry.coordinates);
	  // that.mian(jian.features[0].geometry.coordinates);
	  // that.mian(fuzhou.features[0].geometry.coordinates);
	  // that.mian(yingtan.features[0].geometry.coordinates);
	  // that.mian(pingxiang.features[0].geometry.coordinates);
	  // that.mian(xingyu.features[0].geometry.coordinates);
	  for(let i=0;i<zdata.features.length;i++){
		  that.mian2(zdata.features[i].geometry.coordinates);
	  }
	  
      for (let i = 0; i < jiangximapdata.features.length; i++) {
        that.mian(jiangximapdata.features[i].geometry.coordinates);
      }
    });
    
    // setTimeout(function () {
    //   for (let i = 0; i < jiangximapdata.features.length; i++) {
    //     that.mian(jiangximapdata.features[i].geometry.coordinates);
    //   }
    // }, 8000);
  },
};
</script>

<style scoped>
	.content-tanchuang img{
		width:460px;
	}
	.close-btn{
		position:absolute;
		top:6px;
		height:80px;
		right:6px;
		cursor:pointer;
		
	}
	
.maptanchuang .title{
	display:flex;
	align-items: center;
	justify-content: space-between;
	height:36px;
}
.list-wrap .left{
	width:120px;
}
.list-wrap{
	display:flex;
	font-size:13px;
}
.maptanchuang{
	display:none;
	position:fixed;
	padding:0 12px 8px 12px;
	background:#fff;
}
#mapwrap {
  height: 100%;
  width: 100%;
}
#mapwrap canvas {
  height: 100%;
  width: 100%;
}
</style>
